<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
    <style>
        ul{
            width: 500px;
            height: 300px;
            /* line-height: 100px; */
            border: 1px #ccc solid;
        }
        li {
            width: 100px;
            height: 30px;
            border: 1px red solid;
        }
    </style>
</head>

<body>
    <div id="root">
        
    </div>
    
</body>
<script type="text/babel">
    /* // 创建一个文档碎片，用于将渲染的东西装进去，等结束后再进行渲染，避免了每创建一个节点就要进行一次重拍和重绘
    const Fragment = document.createDocumentFragment();
    for(let i = 0; i< 3; i++) {
        let li = document.createElement('li')
        li.innerHTML = i
        Fragment.appendChild(li)
    }
    ul.appendChild(Fragment) */

    /* 文档碎片，解决了react要求必须有唯一根节点，导致多一层div结构的问题*/
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    const { Fragment } = React;
    root.render((
        // 用法一
        /*
        <React.Fragment>
            <div>1111</div>
            <div>2222</div>
        </React.Fragment>
        */

        // 用法二
        /*
        <Fragment>
            <div>1111</div>
            <div>2222</div>
        </Fragment>
        */
        // 用法三
        <>
            <div>1111</div>
            <div>2222</div>
        </>
    ))
</script>

</html>